import React from "react";
import { Navigate } from "react-router-dom";
import { UserOutlined } from "@ant-design/icons";
import { Spin } from "antd";
// 懒加载
import ArticleMg from "@/views/Article/Article";
import BlLayout from "@/components/Layout/Layout.jsx";
const Home = React.lazy(() => import("@/views/Home/index.jsx"));
const Article = React.lazy(() => import("@/views/Article/index.jsx"));
const NotFound = React.lazy(() => import("@/views/NotFound.jsx"));
const Login = React.lazy(() => import("@/views/Login.jsx"));
const Category = React.lazy(() => import("@/views/Article/Category.jsx"));
const Tag = React.lazy(() => import("@/views/Article/Tag.jsx"));
const Site = React.lazy(() => import("@/views/Site/index.jsx"));
const Dict = React.lazy(() => import("@/views/Site/dict.jsx"));
const Quzi = React.lazy(() => import("@/views/Site/quzi.jsx"));
const FriendLink = React.lazy(() => import("@/views/Site/friendLink.jsx"));
const SiteClass = React.lazy(() => import("@/views/Site/siteClass.jsx"));
const System = React.lazy(() => import("@/views/System/index.jsx"));
const Role = React.lazy(() => import("@/views/System/role.jsx"));
const User = React.lazy(() => import("@/views/System/user.jsx"));
const DictData = React.lazy(() => import("@/views/Site/dictData.jsx"));
const QuziComment = React.lazy(() => import("@/views/Site/quziComment.jsx"));
const NavData = React.lazy(() => import("@/views/Site/navData.jsx"));
const Limit = React.lazy(() => import("@/views/System/limit.jsx"));
// // 抽取loading函数
function loading(reactDom) {
  return (
    <React.Suspense
      fallback={
        <div
          className="container"
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "100%",
          }}
        >
          <Spin fullscreen="true" />
        </div>
      }
    >
      {reactDom}
    </React.Suspense>
  );
}
const router = [
  {
    path: "/",
    element: <BlLayout />,
    meta: {
      isShow: false,
    },
    children: [
      {
        path: "/home",
        element: loading(<Home />),
        meta: {
          icon: <UserOutlined />,
          label: "首页",
          isShow: true,
        },
      },
      {
        path: "/article",
        element: loading(<Article />),
        meta: {
          icon: <UserOutlined />,
          label: "文章管理",
        },
        children: [
          {
            path: "",
            element: <Navigate to="/article/article-manage"></Navigate>,
          },
          {
            path: "article-manage",
            element: loading(<ArticleMg />),
          },
          {
            path: "tag-manage",
            element: loading(<Tag />),
            meta: {
              icon: <UserOutlined />,
              label: "标签管理",
            },
          },
          {
            path: "cate-manage",
            element: loading(<Category />),
            meta: {
              icon: <UserOutlined />,
              label: "分类管理",
            },
          },
        ],
      },
      {
        path: "/site",
        element: loading(<Site />),
        meta: {
          icon: <UserOutlined />,
          label: "字典管理",
        },
        children: [
          {
            path: "",
            element: <Navigate to="/site/dict"></Navigate>,
          },
          {
            path: "dict",
            element: loading(<Dict />),
          },
          {
            path: "quzi",
            element: loading(<Quzi />),
          },
          {
            path: "friendLink",
            element: loading(<FriendLink />),
          },
          {
            path: "siteClass",
            element: loading(<SiteClass />),
          },
          {
            path: "navData",
            element: loading(<NavData />),
          },
          {
            path: "dictData", //字典列表
            element: loading(<DictData />),
          },
          {
            path: "comment",
            element: loading(<QuziComment />),
          },
        ],
      },
      {
        path: "/system",
        element: loading(<System />),
        children: [
          {
            path: "",
            element: <Navigate to="/system/user"></Navigate>,
          },
          {
            path: "user",
            element: loading(<User />),
          },
          {
            path: "role",
            element: loading(<Role />),
          },
          {
            path: "limit",
            element: loading(<Limit />),
          },
        ],
      },
    ],
  },
  {
    path: "/login",
    element: loading(<Login />),
    meta: {
      isShow: false,
    },
  },
  {
    path: "/404",
    element: loading(<NotFound />),
    meta: {
      isShow: false,
    },
  },
];

export default router;
